<template>
	<view class="wrapper">
		<div class="tip-text">上传视频文件</div>
		<div class="inner-box">
			<u-upload :fileList="fileList" @afterRead="afterRead" name="file" :maxCount="1" accept="video" width="250"
				height="150">
				<image src="../../static/icon/upload.png" mode="widthFix" style="width: 80px;height: 30px;"></image>
			</u-upload>
			<span>请先<span style="color: #409eff;">点击上传</span>视频文件</span>
		</div>
		<div class="tip-text">检测结果</div>
		<iframe v-if="hasReady" :src="videoResultUrl" class="video-area"></iframe>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasReady:false,
				videoResultUrl: '',
				fileList: []
			}
		},
		methods: {
			afterRead(file, lists, name) {
				var uploadFile = file.file
				uni.uploadFile({
					url: 'http://yiyuy.nat300.top/uploadVideo',
					filePath: uploadFile.url,
					name:'file',
					success: (res) => {
						// 上传完毕后 修改web-view请求地址
						this.videoResultUrl = 'http://yiyuy.nat300.top/getVideoHTML'
						this.hasReady = true;
					},
					fail: (err) => {
						console.log('上传文件失败')
					}
				})
			}
		}
	}
</script>

<style>
	.wrapper {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.inner-box {
		margin-top: 2%;
		width: 100%;
		border: 1px dashed #666;
		padding: 1.5%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tip-text {
		font-size: 17px;
		margin-top: 2%;
	}

	.video-area {
		border: 1px dashed #666;
		flex: 1;
	}
</style>